<template>
  <el-container style="height:1070px;background-color: #06134A">
    <!--抬头区域-->
    <el-header style="height: 10.5%" class="headerbackgroud">
      <div style="color: white;font-size: 30px;text-align: center;margin-top: 20px;margin-left: 70px">特种设备检测监测云平台</div>
      <el-card style="width:150px;height:50px;text-align:left;margin-left:80px;margin-top:-30px;border-radius:30px;background-color: #7d93ea">
        <div style="color: white;margin-left: 6px;margin-top: -10px">
          大连特种设备工业有限公司
        </div>
      </el-card>
      <el-card style="width:125px;height:50px;align-items:right;margin-left:1600px;margin-top:-30px;border-radius:30px;background-color: #7d93ea">
        <div style="color: white;margin-left: 2px;margin-top: -8px">
          {{dateFormat(date)}}
        </div>
      </el-card>
    </el-header>
    <!--中间区域-->
    <el-main style="height: 44.5%">
      <el-row :gutter="0" style="height: 100%">
        <el-col :span="6" style="height: 100%;border: 1px solid #0ee0e6;border-radius: 20px">
          <el-container style="height: 100%">
            <el-header  style="height: 15%;border: 1px solid #08bdb9;box-shadow: 0 1px 12px 0 #f6f6f6;border-radius: 20px">
              <div style="color: #72C22D;font-size: 30px;text-align: center;margin-top: 15px">定检数据分析</div>
            </el-header>
            <el-main style="height: 67%">
              <div style="text-align: left;color: #4AB7BD;font-size: 22px"><i class="el-icon-check">分布区域分布统计</i></div>
              <div style="text-align: left;color: #4AB7BD;font-size: 22px;margin-top: 15px"><i class="el-icon-check">使用单位分布统计</i></div>
              <div style="text-align: left;color: #4AB7BD;font-size: 22px;margin-top: 15px"><i class="el-icon-check">设备类型统计</i></div>
              <div style="text-align: left;color: #4AB7BD;font-size: 22px;margin-top: 15px"><i class="el-icon-check">高参数设备信息统计</i></div>
              <div style="text-align: left;color: #4AB7BD;font-size: 22px;margin-top: 15px"><i class="el-icon-check">使用年限分布统计</i></div>
              <div style="text-align: left;color: #E65D6E;font-size: 22px;margin-top: 15px"><i class="el-icon-close">制造单位分布统计</i></div>
              <div style="text-align: left;color: #E65D6E;font-size: 22px;margin-top: 15px"><i class="el-icon-close">一次定检合格率统计</i></div>
            </el-main>
            <el-footer style="height: 13%">
              <div style="text-align: center;margin-top: 5px"><el-button style="font-size: 18px" type="goon"@click="regularCheck">查看结果</el-button></div>
            </el-footer>
          </el-container>
        </el-col>
        <el-col :span="6" style="height: 100%;border: 1px solid #04bdb9;border-radius: 20px">
          <el-container style="height: 100%">
            <el-header  style="height: 15%;border: 1px solid #08bdb9;box-shadow: 0 1px 12px 0 #f6f6f6;border-radius: 20px">
              <div style="color: #72C22D;font-size: 30px;text-align: center;margin-top: 15px">检测数据分析</div>
            </el-header>
            <el-main style="height: 67%">
              <div style="text-align: left;color: #4AB7BD;font-size: 22px"><i class="el-icon-check">起重设备类型统计</i></div>
              <div style="text-align: left;color: #4AB7BD;font-size: 22px;margin-top: 15px"><i class="el-icon-check">检测部件部位统计</i></div>
              <div style="text-align: left;color: #E65D6E;font-size: 22px;margin-top: 15px"><i class="el-icon-close">检测结果综合统计</i></div>
              <div style="text-align: left;color: #4AB7BD;font-size: 22px;margin-top: 15px"><i class="el-icon-check">检测部位损伤演化</i></div>
            </el-main>
            <el-footer style="height: 13%">
              <div style="text-align: center;margin-top: 5px"><el-button style="font-size: 18px" type="goon"@click="dataCheck">查看结果</el-button></div>
            </el-footer>
          </el-container>
        </el-col>
        <el-col :span="6" style="height: 100%;border: 1px solid #04bdb9;border-radius: 20px">
          <el-container style="height: 100%">
            <el-header  style="height: 15%;border: 1px solid #08bdb9;box-shadow: 0 1px 12px 0 #f6f6f6;border-radius: 20px">
              <div style="color: #72C22D;font-size: 30px;text-align: center;margin-top: 15px">自检数据分析</div>
            </el-header>
            <el-main style="height: 67%">
              <div style="text-align: left;color: #4AB7BD;font-size: 22px"><i class="el-icon-check">日检内容聚类分析</i></div>
              <div style="text-align: left;color: #4AB7BD;font-size: 22px;margin-top: 15px"><i class="el-icon-check">周检内容聚类分析</i></div>
              <div style="text-align: left;color: #4AB7BD;font-size: 22px;margin-top: 15px"><i class="el-icon-check">月检内容聚类分析</i></div>
              <div style="text-align: left;color: #4AB7BD;font-size: 22px;margin-top: 15px"><i class="el-icon-check">自检数据相关分析</i></div>
            </el-main>
            <el-footer style="height: 13%">
              <div style="text-align: center;margin-top: 5px"><el-button style="font-size: 18px" type="goon">查看结果</el-button></div>
            </el-footer>
          </el-container>
        </el-col>
        <el-col :span="6" style="height: 100%;border: 1px solid #04bdb9;border-radius: 20px">
          <el-container style="height: 100%">
            <el-header  style="height: 15%;border: 1px solid #08bdb9;box-shadow: 0 1px 12px 0 #f6f6f6;border-radius: 20px">
              <div style="color: #72C22D;font-size: 30px;text-align: center;margin-top: 15px">故障数据分析</div>
            </el-header>
            <el-main style="height: 67%">
              <div style="text-align: left;color: #4AB7BD;font-size: 22px"><i class="el-icon-check">故障设备类型统计</i></div>
              <div style="text-align: left;color: #4AB7BD;font-size: 22px;margin-top: 15px"><i class="el-icon-check">故障部件类别统计</i></div>
              <div style="text-align: left;color: #4AB7BD;font-size: 22px;margin-top: 15px"><i class="el-icon-check">故障类型聚类分析</i></div>
              <div style="text-align: left;color: #4AB7BD;font-size: 22px;margin-top: 15px"><i class="el-icon-check">故障原因综合统计</i></div>
            </el-main>
            <el-footer style="height: 13%">
              <div style="text-align: center;margin-top: 5px"><el-button style="font-size: 18px" type="goon">查看结果</el-button></div>
            </el-footer>
          </el-container>
        </el-col>
      </el-row>
    </el-main>
    <!--底部区域-->
    <el-footer style="height: 45%">
      <el-row :gutter="0" style="height: 100%">
        <el-col :span="6" style="height: 100%;border: 1px solid #04bdb9;border-radius: 20px">
          <el-container style="height: 100%">
            <el-header  style="height: 15%;border: 1px solid #08bdb9;box-shadow: 0 1px 12px 0 #f6f6f6;border-radius: 20px">
              <div style="color: #72C22D;font-size: 30px;text-align: center;margin-top: 15px">维修数据分析</div>
            </el-header>
            <el-main style="height: 67%">
              <div style="text-align: left;color: #4AB7BD;font-size: 22px"><i class="el-icon-check">维修设备类型统计</i></div>
              <div style="text-align: left;color: #4AB7BD;font-size: 22px;margin-top: 15px"><i class="el-icon-check">维修部件类别统计</i></div>
              <div style="text-align: left;color: #E65D6E;font-size: 22px;margin-top: 15px"><i class="el-icon-close">维修类型聚类分析</i></div>
            </el-main>
            <el-footer style="height: 13%">
              <div style="text-align: center;margin-top: 5px"><el-button style="font-size: 18px" type="goon">查看结果</el-button></div>
            </el-footer>
          </el-container>
        </el-col>
        <el-col :span="6" style="height: 100%;border: 1px solid #04bdb9;border-radius: 20px">
          <el-container style="height: 100%">
            <el-header  style="height: 15%;border: 1px solid #08bdb9;box-shadow: 0 1px 12px 0 #f6f6f6;border-radius: 20px">
              <div style="color: #72C22D;font-size: 30px;text-align: center;margin-top: 15px">运行数据分析</div>
            </el-header>
            <el-main style="height: 67%">
              <div style="text-align: left;color: #4AB7BD;font-size: 22px"><i class="el-icon-check">设备报警次数统计</i></div>
              <div style="text-align: left;color: #4AB7BD;font-size: 22px;margin-top: 15px"><i class="el-icon-check">安全保护装置评估</i></div>
              <div style="text-align: left;color: #4AB7BD;font-size: 22px;margin-top: 15px"><i class="el-icon-check">司机操作状态评估</i></div>
              <div style="text-align: left;color: #4AB7BD;font-size: 22px;margin-top: 15px"><i class="el-icon-check">设备运行时间统计</i></div>
              <div style="text-align: left;color: #4AB7BD;font-size: 22px;margin-top: 15px"><i class="el-icon-check">设备工作循环分析</i></div>
              <div style="text-align: left;color: #4AB7BD;font-size: 22px;margin-top: 15px"><i class="el-icon-check">安全性能综合评估</i></div>
            </el-main>
            <el-footer style="height: 13%">
              <div style="text-align: center;margin-top: 5px"><el-button style="font-size: 18px" type="goon">查看结果</el-button></div>
            </el-footer>
          </el-container>
        </el-col>
        <el-col :span="6" style="height: 100%;border: 1px solid #04bdb9;border-radius: 20px">
          <el-container style="height: 100%">
            <el-header  style="height: 15%;border: 1px solid #08bdb9;box-shadow: 0 1px 12px 0 #f6f6f6;border-radius: 20px">
              <div style="color: #72C22D;font-size: 30px;text-align: center;margin-top: 15px">检测数据分析</div>
            </el-header>
            <el-main style="height: 67%">
              <div style="text-align: left;color: #E65D6E;font-size: 22px"><i class="el-icon-close">结构、减速机、制动器和电机建康诊断、损伤识别、故障预测</i></div>
              <div style="text-align: left;color: #4AB7BD;font-size: 22px;margin-top: 15px"><i class="el-icon-check">结构、减速机、制动器和电机健康诊断、损伤识别、故障预测</i></div>
            </el-main>
            <el-footer style="height: 13%">
              <div style="text-align: center;margin-top: 5px"><el-button style="font-size: 18px" type="goon">查看结果</el-button></div>
            </el-footer>
          </el-container>
        </el-col>
        <el-col :span="6" style="height: 100%;border: 1px solid #04bdb9;border-radius: 20px">
          <el-container style="height: 100%">
            <el-header  style="height: 15%;border: 1px solid #08bdb9;box-shadow: 0 1px 12px 0 #f6f6f6;border-radius: 20px">
              <div style="color: #72C22D;font-size: 30px;text-align: center;margin-top: 15px">集成数据分析</div>
            </el-header>
            <el-main style="height: 67%">
              <div style="text-align: left;color: #4AB7BD;font-size: 22px"><i class="el-icon-check">全国/省起重机动态风险图</i></div>
              <div style="text-align: left;color: #4AB7BD;font-size: 22px;margin-top: 15px"><i class="el-icon-check">不同起重机类型动态风险图</i></div>
            </el-main>
            <el-footer style="height: 13%">
              <div style="text-align: center;margin-top: 5px"><el-button style="font-size: 18px" type="goon">查看结果</el-button></div>
            </el-footer>
          </el-container>
        </el-col>
      </el-row>
    </el-footer>
  </el-container>
</template>

<script>
  import echarts from 'echarts'
  import Vue from 'vue'
  export default {
    name: 'DataAnalysis',
    data() {
      return {
        date: new Date(),
      }
    },
    mounted() {
      let _this = this //声明一个变量指向vue实例this,保证作用域一致
      this.timer = setInterval(function() {
        _this.date = new Date()//修改数据date
      }, 1000)
    },
    beforeDestroy() {
      if (this.timer) {
        clearInterval(this.timer)//在vue实例销毁钱，清除我们的定时器
      }
    },
    methods:{
      dateFormat(time) {
        var date = new Date(time)
        var year=date.getFullYear()
        /* 在日期格式中，月份是从0开始的，因此要加0
         * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
         * */
        var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1
        var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate()
        var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours()
        var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes()
        var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds()
        // 拼接
        return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds
      },
      regularCheck() {
        this.$router.push({ path: '/dataAnalyzation/regularCheckPage' })
      },
      dataCheck() {
        this.$router.push({ path: '/dataAnalyzation/dataCheckPage' })
      }
    }
  }
</script>

<style scoped>
  .headerbackgroud{
    background-image: url("../../../../assets/screen-header.jpg");
  }
  .row-bg {
    padding: 10px 0;
  }
  .el-button--goon.is-active,
  .el-button--goon:active {
    background: #bd6b20;
    border-color: #bd3377;
    color: #fff;
  }

  .el-button--goon:focus,
  .el-button--goon:hover {
    background: #67C23A;
    border-color: #48D1CC;
    color: #fff;
  }

  .el-button--goon {
    color: #FFF;
    background-color: #4AB7BD;
    border-color: #5512b2;
  }
</style>
